<!DOCTYPE html>
<html>
  <head>
    {include file="common/meta" /}
  </head>
  <body>
    <div class="x-body">
        <form class="layui-form" method="post" enctype="multipart/form-data">
            <!-- 用户邮箱 -->
          <div class="layui-form-item">
              <label for="email" class="layui-form-label">
                  <span class="x-red">*</span>邮箱
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="email" value="{$userlist.email}" name="email" required class="layui-input">
              </div>
          </div>

          <!-- 用户昵称 -->
          <div class="layui-form-item">
              <label for="nickname" class="layui-form-label">
                  <span class="x-red">*</span>昵称
              </label>
              <div class="layui-input-inline">
                  <input type="text" value="{$userlist.nickname}" id="nickname" name="nickname" required class="layui-input">
              </div>
          </div>

          <!-- 旧密码 -->
          <div class="layui-form-item">
            <label for="oldpass" class="layui-form-label">
                <span class="x-red">*</span>旧密码
            </label>
            <div class="layui-input-inline">
                <input type="password" id="oldpass" name="oldpass" class="layui-input">
            </div>
          </div>

          <!-- 密码 -->
          <div class="layui-form-item">
              <label for="password" class="layui-form-label">
                  <span class="x-red">*</span>新密码
              </label>
              <div class="layui-input-inline">
                  <input type="password" id="password" name="password" class="layui-input">
              </div>
          </div>

          <!-- 确认密码 -->
          <div class="layui-form-item">
              <label for="repass" class="layui-form-label">
                  <span class="x-red">*</span>确认密码
              </label>
              <div class="layui-input-inline">
                  <input type="password" id="repass" name="repass" lay-verify="repass" class="layui-input">
              </div>
          </div>

          <!-- 性别 -->
          <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>性别
            </label>
            <div class="layui-input-inline">
                <select name="sex" lay-verify="required" lay-filter="type">
                    <option {$userlist['sex']== 0 ? 'selected' : 0} value="0">保密</option>
                    <option {$userlist['sex']== 1 ? 'selected' : 0} value="1">男</option>
                    <option {$userlist['sex']== 2 ? 'selected' : 0} value="2">女</option>
                </select>
            </div>
          </div>

          <!-- 城市 -->
          <div class="layui-form-item">
            <label for="L_city" class="layui-form-label">城市</label>
            <!-- 省份 -->
            <div class="layui-input-inline">
              <select name="province" id="province" lay-filter="province" lay-verify="required">
                <option value="">请选择省</option>
                {foreach $province as $item}
                  <option {$userlist.province == $item.code ? "selected" : ""} value="{$item.code}">{$item.name}</option>
                {/foreach}
              </select>
            </div>

            <!-- 城市 -->
            <div class="layui-input-inline">
              <select name="city" id="city" lay-filter="city">
                <option value="">请选择市</option>
                {foreach $city as $item}
                  <option {$userlist.city == $item.code ? "selected" : ""} value="{$item.code}">{$item.name}</option>
                {/foreach}
              </select>
            </div>

            <!-- 县/区 -->
            <div class="layui-input-inline">
              <select name="district" id="district" lay-filter="district">
                <option value="">请选择县/区</option>
                {foreach $district as $item}
                  <option {$userlist.district == $item.code ? "selected" : ""} value="{$item.code}">{$item.name}</option>
                {/foreach}
              </select>
            </div>
          </div>

          <!-- 个人简介 -->
          <div class="layui-form-item layui-form-text">
            <label for="content" class="layui-form-label">个人简介</label>
            <div class="layui-input-block">
              <textarea placeholder="随便写些什么刷下存在感" id="content"  name="content" class="layui-textarea" style="height: 80px;width: 43%;">{$userlist.content}</textarea>
            </div>
          </div>

          <!-- 头像 -->
          <div class="layui-form-item">
            <label for="avatar" class="layui-form-label">修改头像</label>
            <div class="avatar-add">
              <button onclick="avatar.click()" type="button" class="layui-btn upload-img" style="display:block;">
                <i class="layui-icon">&#xe67c;</i>上传头像
              </button>
              <input type="file" name="avatar" id="avatar" hidden />
              {if condition="$userlist.avatar"}
                <a href="/{$userlist.avatar}" target="_blank">
                    <img src="/{$userlist.avatar}" style="width: 100px;height: 100px;margin: .3em 0em 0em 8em;" />
                </a>
              {else /}
                <a href="/assets/home/images/avatar.jpg" target="_blank">
                    <img src="/assets/home/images/avatar.jpg" style="width: 100px;height: 100px;margin: .3em 0em 0em 8em;" />
                </a>
              {/if}
            </div>
          </div>

          <!-- 封面 -->
          <div class="layui-form-item">
            <label for="cover" class="layui-form-label">修改背景</label>
            <div class="avatar-add">
              <button onclick="cover.click()" type="button" class="layui-btn upload-img" style="display:block;">
                <i class="layui-icon">&#xe67c;</i>上传封面
              </button>
              <input type="file" name="cover" id="cover" hidden />
              {if condition="$userlist.cover"}
                <a href="/{$userlist.cover}" target="_blank">
                    <img src="/{$userlist.cover}" style="width: 100px;height: 100px;margin: .3em 0em 0em 8em;" />
                </a>
              {else /}
                <a href="/assets/home/images/back.jpg" target="_blank">
                    <img src="/assets/home/images/back.jpg" style="width: 100px;height: 100px;margin: .3em 0em 0em 8em;" />
                </a>
              {/if}
            </div>
          </div>
          
          <div class="layui-form-item">
              <label for="repass" class="layui-form-label">
              </label>
              <button class="layui-btn" type="submit">
                  修改
              </button>
              <button type="button" class="layui-btn layui-btn-primary" onclick="history.go(-1)">返回</button>
          </div>
        </form>
    </div>
  </body>
</html>
<script src="/assets/home/layui/layui.js"></script>
<script>
  layui.use(['layer','jquery','form'],function(){
    var layer=layui.layer
    var form=layui.form
    var $=layui.jquery

    // 给省份绑定事件
    form.on('select(province)',function(data){
      var province=data.value

      // 异步请求
      $.ajax({
        type:'post',
        url:`{:url('admin/user.user/area')}`,
        data:`code=${province}`,
        dataType:'json',
        success:function(success){
          var output='<option>请选择城市</option>';

          for(var city of success){
            output += `<option value="${city.code}">${city.name}</option>`
          }

          $('#city').html(output)
          $('#district').html(`<option value="">请选择县/区</option>`)

          // 用layui的方式渲染一下select下拉框
          form.render('select')
        }
      })
    })

    // 给城市绑定事件 lay-filter
    form.on('select(city)',function(data){
      var city=data.value

      // 异步请求
      $.ajax({
        type:'post',
        url:`{:url('admin/user.user/area')}`,
        data:`code=${city}`,
        dataType:'json',
        success:function(success){
          var output='<option>请选择县/区</option>';

          for(var item of success){
            output += `<option value="${item.code}">${item.name}</option>`
          }

          $('#district').html(output)

          // 用layui的方式渲染一下select下拉框
          form.render('select')
        }
      })
    })

    // 确认密码
    form.verify({
      repass:function(value){
        // 验证密码和确认密码
        if($(`input[name='password']`).val() != value){
          return '密码和确认密码不一致'
        }
      }
    })
  })

</script>